<template>
  <div>
    <h1 style="position: relative;left: auto;letter-spacing: 20px">任务调度平台</h1>
    <el-button type="primary" plain>添加任务</el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%;position: relative;top: -40px;">
      <el-table-column
        prop="cronKey"
        label="定时任务key"
        width="230">
      </el-table-column>
      <el-table-column
        prop="cronExpression"
        label="定时任务表达式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="taskPlain"
        label="定时任务描述"
        width="220">
      </el-table-column>
      <el-table-column
        prop="status"
        label="任务状态"
        width="50">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="250">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="success" @click="updateOpenTask(scope.row.cronId)" icon="el-icon-s-help" size="small">启用</el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="stopScheduleTask(scope.row.cronId)" icon="el-icon-close" type="info" size="small">关闭</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="danger" @click="doDelete" icon="el-icon-delete-solid" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination

      style="position: relative; left: 200px;"
      background
      :page-size="10"
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
</template>
<script>

export default {
  methods: {
   /**
   * 查看评论
   */
    /*showContent () {
      alert(this.tableData.n_id)
      this.$router.push({path: 'showContent', query: {id: this.tableData.n_id}})
    },*/

    //在参数中加入{emulateJSON: true},用于解决前端跨域
    updateOpenTask(cronId){
      alert("开启定时任务"+cronId);
      this.$http.post('http://localhost:8888/schedule/updateTask',{cronId:cronId,status:1}).then(({data:res})=>{
      console.log(res.data);
    })
    },
    stopScheduleTask(cronId){
      console.log("关闭定时任务"+cronId);
      this.$http.post('http://localhost:8888/schedule/updateTask',{cronId:cronId,status:0}).then(({data:res})=>{
        console.log(res.data);
      })
    },

    /**
     * 模糊查询
    */
    onSubmit () {
      this.$http.get('http://localhost:8888/schedule', {params: {n_title: this.vform.n_title}}).then(({data: res}) => {
        this.tableData = res
      })
    },
    /**
    *删除功能
    */
    doDelete () {

    }
  },
  data () {
    return {
      tableData: [{
        cronKey: 'PrintTask',
        cronExpression: '上海男足',
        taskPlain: '普陀区在哪里',
        status: 1,
        createTime: '2019-08-21'
      }],
      vform: [{
        cronKey: ''
      }]
    }
  },
  created () {
    this.$http.get('http://localhost:8888/schedule/allTask').then(resp => {
      this.tableData = resp.data.data;
      console.log(resp.data)
    })
  }
}
</script>

<style scoped>

</style>
